<template>
  <div class="table_layout ">
    <div class="table_title" flex="main:justify cross:center">
      <div flex>
        <p>创建人：{{ tableData.creator || '--' }}</p>
        <p style="margin-left:20px">创建时间：{{ tableData.createTime || '--' }}</p>
      </div>
      <div>
        <template v-if="!patternIsEdit">
          <el-button class="margin_left_10" type="primary" plain size="mini" @click="showShare = true">分享</el-button>
          <el-button class="margin_left_10" size="mini">打印</el-button>
          <el-button v-if="$store.state.archives.flag !== 2" class="margin_left_10" size="mini" type="warning" plain @click="patternIsEdit = true">编辑</el-button>
        </template>
        <template v-else>
          <el-button class="margin_left_10" size="mini" plain type="success" :loading="loading" @click="handleSave">保存</el-button>
          <el-button class="margin_left_10" size="mini" plain type="danger" @click="handleGetData">取消</el-button>
        </template>
      </div>
    </div>
    <div class="table_containter">
      <div class="container_title">
        <p>{{ $store.state.user.departmentName }}</p>
        <h1>火灾事故调查登记表</h1>
      </div>
      <table border="1" cellspacing="0" cellpadding="0" class="table_content">
        <tr>
          <td rowspan="3">报警人</td>
          <td colspan="2">姓名</td>
          <td colspan="6">
            <input v-if="patternIsEdit" v-model="tableData.name" type="text">
            <span v-else>{{ tableData.name }}</span>
          </td>
          <td colspan="2">性别</td>
          <td colspan="2">
            <el-select v-if="patternIsEdit" v-model="tableData.sex" placeholder="请选择">
              <el-option label="男" :value="0" />
              <el-option label="女" :value="1" />
            </el-select>
            <span v-else>{{ ['男','女'][tableData.sex] }}</span>
          </td>
          <td colspan="2">年龄</td>
          <td colspan="2">
            <input v-if="patternIsEdit" v-model="tableData.age" type="number">
            <span v-else>{{ tableData.age }}</span>
          </td>
        </tr>
        <tr>
          <td colspan="2">工作单位</td>
          <td colspan="6">
            <input v-if="patternIsEdit" v-model="tableData.workUnit" type="text">
            <span v-else>{{ tableData.workUnit }}</span>
          </td>
          <td colspan="2">住址</td>
          <td colspan="6">
            <input v-if="patternIsEdit" v-model="tableData.alarmerAddress" type="text">
            <span v-else>{{ tableData.alarmerAddress }}</span>
          </td>
        </tr>
        <tr>
          <td colspan="2">报警时间</td>
          <td colspan="6">
            <div v-if="patternIsEdit" class="box" style="padding-left:0" flex>
              <input v-model="tableData.alarmTimeDate" style="border:none;" type="date">
              <input v-model="tableData.alarmTimeTime" style="border:none;" type="time">
            </div>
            <span v-else>{{ tableData.alarmTime }}</span>
          </td>
          <td colspan="2">报警方式</td>
          <td colspan="6">
            <!-- <input v-model="tableData.alarmMode" type="text"> -->
            <el-select v-if="patternIsEdit" v-model="tableData.alarmMode" style="width:100%" placeholder="请选择">
              <el-option label="119台转入" value="119台转入" />
            </el-select>
            <span v-else>{{ tableData.alarmMode }}</span>
          </td>
        </tr>
        <tr>
          <td colspan="3">出动情况</td>
          <td colspan="14">
            <input v-if="patternIsEdit" v-model="tableData.outSituation" type="text">
            <span v-else>{{ tableData.outSituation }}</span>
          </td>
        </tr>
        <tr>
          <td colspan="3">起火单位名称（户）</td>
          <td colspan="14">
            <input v-if="patternIsEdit" v-model="tableData.address" type="text">
            <span v-else>{{ tableData.address }}</span>
          </td>
        </tr>
        <tr>
          <td colspan="3">起火地址</td>
          <td colspan="14">
            <input v-if="patternIsEdit" v-model="tableData.detailedAddress" type="text">
            <span v-else>{{ tableData.detailedAddress }}</span>
          </td>
        </tr>
        <tr>
          <td colspan="3">火灾报案简要</td>
          <td colspan="14" style="height:350px;text-align:left">
            <textarea v-if="patternIsEdit" v-model="tableData.briefly" />
            <div v-else class="box" style="background:none">{{ tableData.briefly }}</div>
          </td>
        </tr>
        <!-- <tr>
          <td colspan="3" rowspan="5">火灾报案简要</td>
          <td colspan="2">死亡</td>
          <td colspan="5">
            <input type="text">
          </td>
          <td colspan="2">重伤</td>
          <td colspan="5"><input type="text"></td>
        </tr>
        <tr>
          <td colspan="2">受灾</td>
          <td colspan="5"><input type="text"></td>
          <td colspan="2">过火面积</td>
          <td colspan="5"><input type="text"></td>
        </tr>
        <tr>
          <td colspan="2">大致直接财产损失</td>
          <td colspan="5"><input type="text"></td>
          <td colspan="2">火灾等级</td>
          <td colspan="5"><input type="text"></td>
        </tr> -->
        <tr>
          <td colspan="3">接报案意见</td>
          <td colspan="14">
            <textarea v-if="patternIsEdit" v-model="tableData.leaderOpinion" />
            <div v-else class="box" style="background:none">{{ tableData.leaderOpinion }}</div>
          </td>
        </tr>
        <tr>
          <td colspan="3">领导批示</td>
          <td colspan="14">
            <textarea v-if="patternIsEdit" v-model="tableData.leaderInstructions" />
            <span v-else>{{ tableData.leaderInstructions }}</span>
          </td>
        </tr>
        <tr>
          <td colspan="3">备注</td>
          <td colspan="14">
            <textarea v-if="patternIsEdit" v-model="tableData.remark" />
            <span v-else>{{ tableData.leaderInstructions }}</span>
          </td>
        </tr>
      </table>
    </div>
    <!-- <transition name="el-zoom-in-center">
      <div v-show="patternIsEdit" class="table_shade" />
    </transition> -->
    <shareComponent v-model="showShare" />
  </div>

</template>

<script>
import { parseTime } from '@/utils/time'
// import { requestSave, requestGetById } from '@/api/home'
import shareComponent from './share'
export default {
  components: { shareComponent },
  data() {
    return {
      showShare: false,
      patternIsEdit: false,
      loading: false,
      url: '/register',
      tableData: {
        'address': '',
        'age': 0,
        'alarmMode': '119台转入',
        'alarmTime': parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'),
        'alarmTimeDate': parseTime(new Date(), '{y}-{m}-{d}'),
        'alarmTimeTime': parseTime(new Date(), '{h}:{i}'),
        'alarmerAddress': '',
        'briefly': '',
        'caseOpinion': '',
        'detailedAddress': '',
        'flag': 0,
        'id': 0,
        'leaderInstructions': '',
        'leaderOpinion': '',
        'name': '',
        'outSituation': '',
        'remark': '',
        'sex': 0,
        'title': '',
        'workUnit': ''
      }
    }
  },
  created() {
    this.handleGetData()
  },
  methods: {
    handleSave() {
      const formData = JSON.parse(JSON.stringify(this.tableData))
      formData.archivesId = this.$route.query.archivesId
      formData.alarmTime = `${formData.alarmTimeDate} ${formData.alarmTimeTime}:00`
      formData.title = '火灾调查登记表' + formData.name
      requestSave(formData, this.url).then(res => {
        this.$message.success('操作成功')
        this.$router.replace({ path: this.$route.path, query: { itemId: res.data, ...this.$route.query, isEdit: false }})
        this.handleGetData()
      })
    },
    handleGetData(come) {
      const itemId = this.$route.query.itemId
      this.patternIsEdit = come ? false : JSON.parse(this.$route.query.isEdit || 'false')
      if (!itemId) return
      requestGetById({ id: itemId }, this.url).then(res => {
        this.tableData = res.data
        const [alarmTimeDate, alarmTimeTime] = this.tableData.alarmTime.split(' ')
        this.tableData.alarmTimeDate = alarmTimeDate
        this.tableData.alarmTimeTime = alarmTimeTime
      })
    }

  }
}
</script>

